<template>
  <div>
    <!-- 筛选区 -->
    <div class="sub-filter" v-if="filterData && !filterLoading">
      <!-- 品牌 -->
      <div class="item">
        <div class="head">品牌：</div>
        <div class="body">
          <a
            @click="changeBrand(brand.id)"
            href="javascript:;"
            :class="{ active: brand.id === filterData.selectedBrand }"
            v-for="brand in filterData.brands"
            :key="brand.id"
            >{{ brand.name }}</a
          >
        </div>
      </div>
      <!-- 其他可筛选的属性 -->
      <div
        class="item"
        v-for="sale in filterData.saleProperties"
        :key="sale.id"
      >
        <div class="head">{{ sale.name }}</div>
        <div class="body">
          <a
            @click="changeProps(p.id, sale)"
            href="javascript:;"
            :class="{ active: p.id === sale.selectedAttr }"
            v-for="p in sale.properties"
            :key="p.id"
            >{{ p.name }}</a
          >
        </div>
      </div>
    </div>
    <!-- 骨架信息 -->
    <div v-else class="sub-filter">
      <XtxSkeleton class="item" width="800px" height="40px" />
      <XtxSkeleton class="item" width="800px" height="40px" />
      <XtxSkeleton class="item" width="600px" height="40px" />
      <XtxSkeleton class="item" width="600px" height="40px" />
      <XtxSkeleton class="item" width="600px" height="40px" />
    </div>
  </div>
</template>
<script>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import { findCategoryFilter } from "@/api/category";

export default {
  name: "SubFilter",
  setup(props, { emit }) {
    const route = useRoute();
    const filterData = ref(null);
    const filterLoading = ref(false);
    // 根据二级类目id  获取数据
    watch(
      () => route.params.id,
      async (newValue) => {
        if (newValue && `/category/sub/${newValue}` === route.path) {
          // 发送请求
          filterLoading.value = true;
          let res = await findCategoryFilter(route.params.id);
          // 数据预处理
          // 品牌
          //    添加选中的品牌
          res.result.selectedBrand = null;
          res.result.brands.unshift({ id: null, name: "全部" });
          // 属性
          res.result.saleProperties.forEach((v) => {
            // 添加选中的属性
            v.selectedAttr = null;
            v.properties.unshift({ id: null, name: "全部" });
          });
          filterData.value = res.result;
          filterLoading.value = false;
        }
      },
      { immediate: true }
    );

    // 格式化请求数据
    const getFilterParams = () => {
      // 参考数据：{brandId:'',attrs:[{groupName:'',propertyName:''},...]}
      const obj = { brandId: null, attrs: [] };
      // 品牌
      obj.brandId = filterData.value.selectedBrand;
      // 销售数据
      filterData.value.saleProperties.forEach((item) => {
        // 只有有属性才遍历
        if(item.properties){
          const prop = item.properties.find(prop=>prop.id===item.selectedAttr) // prop必有值
          obj.attrs.push({ groupName: item.name, propertyName: prop.name })
        }
      });
      
      if(obj.attrs.length===0) obj.attrs = null
      // axios 默认不会发送 值为null 的数据
   
      return obj
   };

    // 品牌改变
    const changeBrand = (id) => {
      if (filterData.value.selectedBrand === id) return;
      filterData.value.selectedBrand = id;
      // 通知父组件重新请求数据
      // getFilterParams的返回作为参数传给父组件
      emit("filter-change", getFilterParams());
    };
    // 属性改变
    const changeProps = (p_id, sale) => {
      if (sale.selectedAttr === p_id) return;
      sale.selectedAttr = p_id;
      // 通知父组件重新请求数据
      emit("filter-change", getFilterParams());
    };

    return { filterData, filterLoading, changeBrand, changeProps };
  },
};
</script>
<style scoped lang='less'>
.xtx-skeleton {
  padding: 10px 0;
}

// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>